<!-- author: lizq -->
<!-- date: 2023-03-01 15:09:44 -->
<!-- description: table - 新增、编辑 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="addForm">
    <!-- form -->
    <el-form ref="addFormRef" :model="formData" label-position="top" :rules="formRules" @submit.enter.prevent>
      <el-row :gutter="20">
        <template v-for="(item, i) in formDataInfo" :key="i">
          <el-col :span="singleRow ? 12 : spanNum(i, item.span)">
            <!-- form-item -->
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- input -->
              <el-input
                v-if="item.type == 'input'"
                v-model="formData[item.prop]"
                v-maxLength="item.max"
                :disabled="item.disabled ? true : false"
                placeholder="请输入"
                clearable
              />
              <!-- select -->
              <el-select
                v-else-if="item.type == 'select'"
                v-model="formData[item.prop + '']"
                :disabled="item.disabled"
                placeholder="请选择"
                :multiple="item.multiple ? true : false"
                clearable
              >
                <template v-if="item.dict">
                  <el-option v-for="a in $dict[item.dict]" :key="a.value" :label="a.label" :value="a.value" />
                </template>
                <template v-else-if="item.options">
                  <el-option v-for="a in item.options" :key="a.value" :label="a.label" :value="a.value" />
                </template>
              </el-select>
              <!-- date -->
              <el-date-picker
                v-else-if="item.type == 'date'"
                v-model="formData[item.prop]"
                :disabled="item.disabled"
                :type="item.dateInfo.type"
                :format="item.dateInfo.format"
                :value-format="item.dateInfo.vFormat"
                :unlink-panels="item.dateInfo.unlink"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                placeholder="请选择"
              />
              <!-- textarea -->
              <el-input
                v-else-if="item.type == 'textarea'"
                v-model="formData[item.prop]"
                :disabled="item.disabled ? true : false"
                maxlength="50"
                type="textarea"
                show-word-limit
                :autosize="{ minRows: 3 }"
                placeholder="请输入"
              />
              <!-- slot -->
              <slot v-else-if="item.type == 'slot'" :name="item.prop"></slot>
            </el-form-item>
          </el-col>
          <el-col v-if="singleRow" :span="12"></el-col>
        </template>
      </el-row>
    </el-form>
    <!-- but -->
    <div class="footer">
      <el-button type="primary" @click="onSubmit(1)">确认</el-button>
      <el-button @click="onSubmit">返回</el-button>
    </div>
  </div>
</template>

<script setup>
const $props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  formRules: {
    type: Object,
    default: () => {}
  },
  formDataInfo: {
    type: Array,
    default: () => []
  },
  singleRow: {
    type: Boolean,
    default: false
  }
});
const $emit = defineEmits(["callBackData"]);

//初始化-字典数据
const { proxy } = getCurrentInstance();
const dictList = ref([]);
$props.formDataInfo.forEach((item) => {
  if (item.dict) {
    dictList.value.push(item.dict);
  }
});
const $dict = proxy.$dict(dictList.value);

const addFormRef = ref(null);
//确认
const onSubmit = (val) => {
  if (val == 1) {
    addFormRef.value.validate((valid, fields) => {
      if (valid) {
        $emit("callBackData", $props.formData);
      } else {
        console.log("error submit!", fields);
      }
    });
  } else {
    $emit("callBackData", "");
  }
};

//计算span值
const spanNum = computed(() => (index, span) => {
  if (span) {
    return span;
  } else {
    return index == $props.formDataInfo.length - 1 && $props.formDataInfo.length % 2 == 1 ? 24 : 12;
  }
});
</script>

<style scoped lang="scss">
.addForm {
  box-sizing: border-box;
}
:deep(.el-form-item__label) {
  font-weight: bold;
  color: #333;
}
//input
:deep(.el-form-item) {
  margin-bottom: 20px !important;
}
:deep(.el-date-editor .el-input__wrapper) {
  width: 100%;
}
</style>
